<template>
    <div class="continer">
        <!-- 搜索 -->
        <div class="addSpaceBtn">
            <el-form :model="search" :inline="true" ref="sc" @submit.native.prevent style="float: right;">
                <el-form-item label="" prop="id">
                    <el-input type="text" v-model="search.id" placeholder="请输入id"></el-input>
                </el-form-item>
                <el-form-item label="" prop="linkman">
                    <el-input type="text" v-model="search.linkman" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="" prop="tel">
                    <el-input type="text" v-model="search.tel" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-button type="primary" class="ml_10" @click="()=>{getList()}" native-type="submit">搜索</el-button>
                <el-button @click="resetForm('sc')">重置</el-button>
            </el-form>
        </div>
        <!-- 表格 -->
        <el-table v-loading="tableload" :data="gszcData" row-key="id" style="width:100%" default-expand-all stripe border>
            <el-table-column label="编号" prop="id"></el-table-column>
            <el-table-column label="公司名称">
                <template slot-scope="scopew">
                    {{scopew.row.name.join(',')}}
                </template>
            </el-table-column>
            <el-table-column label="联系人" prop="linkman"></el-table-column>
            <el-table-column label="联系电话" prop="tel"></el-table-column>
            <el-table-column label="地址" prop="addr"></el-table-column>
            <el-table-column label="注册资本(万元)" prop="registered_assets"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="()=>{detail(scope.row)}">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 查看窗口 -->
        <el-dialog
          title="查看"
          :visible.sync="detailServerVisible"
          width="70%"
          @close='radioChange'
          >
            <table class="detailTable">
                <tr><td class="tr">编号：</td><td>{{detailData.id}}</td></tr>
                <tr><td class="tr">公司名称：</td><td style="width: 100%; display: block;" v-for="(item, index) in detailData.name" :key='index'>{{item}}</td></tr>
                <tr><td class="tr">联系人：</td><td>{{detailData.linkman}}</td></tr>
                <tr><td class="tr">联系电话：</td><td>{{detailData.tel}}</td></tr>
                <tr><td class="tr">地址：</td><td>{{detailData.addr}}</td></tr>
                <tr><td class="tr">注册资本(万元)：</td><td>{{detailData.registered_assets}}</td></tr>
                <tr><td class="tr">出资比例：</td><td>{{detailData.proportion_assets}}</td></tr>
                <tr><td class="tr">经营范围：</td><td>{{detailData.scope_business}}</td></tr>
                <tr><td class="tr">用户账号：</td><td>{{detailData.user_account}}</td></tr>
                <tr><td class="tr">提交时间：</td><td>{{detailData.create_time}}</td></tr>
                <tr><td class="tr">详细信息：</td></tr>
            </table>
            <div style="padding: 0 30px;">
                <el-table :data="regist_company_man" row-key="id" style="width:100%" default-expand-all stripe border>
                    <el-table-column label="职务">
                        <template slot-scope="scope">
                            {{registComType[scope.$index]}}
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名" prop="name"></el-table-column>
                    <el-table-column label="银行账号" prop="card_bank"></el-table-column>
                    <el-table-column label="预留手机号" prop="tel_bank"></el-table-column>
                    <el-table-column label="身份证正面">
                        <template slot-scope="scope">
                            <img style="width: 100%; height: 100%;" :src="BASE_URL+ '/' + scope.row.card1" @click="fdImg(scope.row.card1, '身份证正面')"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="身份证反面">
                        <template slot-scope="scope">
                            <img style="width: 100%; height: 100%;" :src="BASE_URL+ '/' + scope.row.card2" @click="fdImg(scope.row.card2, '身份证反面')"/>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
        <el-dialog
          title="身份证"
          :visible.sync="imgDownFlag"
          width="50%"
          >
            <!-- <div style="text-align: center; font-size: 20px;"><span class="cur_p" @click="imgDownClick">下载</span></div> -->
            <div style="width: 100%; padding: 40px; box-sizing: border-box;">
                <img style="width: 100%;" :src="BASE_URL+ '/' + imgDownSrc"/>
            </div>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="listLen"
            :page-size="limit"
            @current-change="toPage"
            :current-page.sync="currentPage"
            class="txt_r mt_20"
        ></el-pagination>
    </div>
</template>

<script>
import { companyRegistList, getCompanyRegistInfo, getfile } from "../../../api/spaceManagement/gszc.js";
import {BASE_URL} from '../../../config/app.js';
export default {
    name: "gongshangzhuce",
    data(){
        return {
            BASE_URL: '',
            search: {
                id: '',
                linkman: '',
                tel: ''
            },
            gszcData: [],
            listLen: 0,
            limit: 14,
            currentPage: 1,
            tableload:false,
            // 查看
            detailServerVisible: false,
            detailData: {},
            regist_company_man: [],
            registComType: ['执行董事', '总经理', '监事', '财务'],
            imgDownFlag: false,
            imgDownSrc: '',
            imgDownTitle: ''
        }
    },
    methods: {
        getList(page = 1){
            this.tableload = true;
            companyRegistList(this.search).then((res) => {
                if(res.code == 0){
                    this.gszcData = res.data.list;
                    this.listLen = res.data.total;
                    this.tableload = false;
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        toPage(val){ // 分页
            this.currentPage = val;
            this.getList(val);
        },
        // 查看
        detail(scope){
            this.detailData = scope;
            this.detailServerVisible = true;
            getCompanyRegistInfo({
                regist_id: scope.id
            }).then((res) => {
                if(res.code == 0){
                    this.regist_company_man = res.data.regist_company_man
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        radioChange(){ // 关闭查看窗口
            this.detailServerVisible = false;
        },
        fdImg(src, title){ // 放大图片
            this.imgDownSrc = src;
            this.imgDownTitle = title;
            this.imgDownFlag = true;
        },
        imgDownClick(){ // 下载
            console.log(this.imgDownSrc);
            getfile({
                filepath: this.imgDownSrc
            }).then((res) => {
                // console.log(res)
                window.location.href=this.BASE_URL + '/' + res
                // this.handleDownloadQrIMg(res);
            })
        },
        //qrBase64是后台传回来的base64数据
        handleDownloadQrIMg(qrBase64) {
            // 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
            const imgUrl = `data:image/png;base64,${qrBase64}`;
            console.log(imgUrl);
            // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
            if (window.navigator.msSaveOrOpenBlob) {
                const bstr = atob(imgUrl.split(',')[1]);
                let n = bstr.length;
                const u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                const blob = new Blob([u8arr]);
                window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png');
            } else {
                // 这里就按照chrome等新版浏览器来处理
                const a = document.createElement('a');
                a.href = imgUrl;
                a.setAttribute('download', 'chart-download');
                a.click();
            }
        }
    },
    created() {
        this.BASE_URL = BASE_URL;
        this.getList();
    }
};
</script>

<style scoped>
    .detailTable{font-size:16px;margin-left: 30px; padding: 0 30px;}
    .detailTable td{padding:4px 0 22px;}
    .detailTable .tr{text-align:right;padding-right:12px; padding-left:0; min-width:100px; vertical-align: top;}
    .imgDownFlag{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(101, 101, 101, 0.6); opacity: 0; cursor: pointer;color: #FFFFFF; z-index: 999;text-align: center;padding-top: 100%; box-sizing: border-box;}
    .cur_p{
        cursor: pointer;
    }
    .cur_p:hover{
        color: #409EFF;
        border-bottom: 1px solid #409EFF;
    }
</style>
